<template>
  <view class="supplier-page">
    <view class="supplier-form-container">
      <view class="supplier-form">
        <!-- 供应商编号 -->
        <view class="form-item">
          <view>供应商编号：</view>
          <view>{{ supplier.id || '无' }}</view>
        </view>

        <!-- 供应商名称 -->
        <view class="form-item">
          <view>供应商名称：</view>
          <view>{{ supplier.name || '无' }}</view>
        </view>

        <!-- 联系人 -->
        <view class="form-item">
          <view>联系人：</view>
          <view>{{ supplier.contact || '无' }}</view>
        </view>

        <!-- 手机号码 -->
        <view class="form-item">
          <view>手机号码：</view>
          <view>{{ supplier.mobile || '无' }}</view>
        </view>

        <!-- 联系电话 -->
        <view class="form-item">
          <view>联系电话：</view>
          <view>{{ supplier.telephone || '无' }}</view>
        </view>

        <!-- 电子邮箱 -->
        <view class="form-item">
          <view>电子邮箱：</view>
          <view>{{ supplier.email || '无' }}</view>
        </view>

        <!-- 传真 -->
        <view class="form-item">
          <view>传真：</view>
          <view>{{ supplier.fax || '无' }}</view>
        </view>

        <!-- 备注 -->
        <view class="form-item">
          <view>备注：</view>
          <view>{{ supplier.remark || '无' }}</view>
        </view>

        <!-- 开启状态 -->
        <view class="form-item">
          <view>开启状态：</view>
          <view>{{ formatStatus(supplier.status) }}</view>
        </view>

        <!-- 排序 -->
        <view class="form-item">
          <view>排序：</view>
          <view>{{ supplier.sort || '无' }}</view>
        </view>

        <!-- 纳税人识别号 -->
        <view class="form-item">
          <view>纳税人识别号：</view>
          <view>{{ supplier.taxNo || '无' }}</view>
        </view>

        <!-- 税率 -->
        <view class="form-item">
          <view>税率：</view>
          <view>{{ supplier.taxPercent || '无' }}</view>
        </view>

        <!-- 开户行 -->
        <view class="form-item">
          <view>开户行：</view>
          <view>{{ supplier.bankName || '无' }}</view>
        </view>

        <!-- 开户账号 -->
        <view class="form-item">
          <view>开户账号：</view>
          <view>{{ supplier.bankAccount || '无' }}</view>
        </view>

        <!-- 开户地址 -->
        <view class="form-item">
          <view>开户地址：</view>
          <view>{{ supplier.bankAddress || '无' }}</view>
        </view>

        <!-- 创建时间 -->
        <view class="form-item">
          <view>创建时间：</view>
          <view>{{ formatDate(supplier.createTime) }}</view>
        </view>
      </view>  <!-- 提交按钮 -->
      <view class="form-item">
        <button type="button" @click="submitForm">修改</button>
      </view>
    </view>
  </view>
</template>

<script>
import { getSupplier } from "@/sheep/api/erp/supplier.js";

export default {
  data() {
    return {
      supplierId: "", // 从路由参数获取供应商ID
      supplier: {}, // 用于存储供应商详情
    };
  },

  methods: {
    fetchSupplierDetails() {
      getSupplier(this.supplierId)
        .then((res) => {
          const supplier = res.data;
          this.supplier = supplier;
        })
        .catch(() => {
          uni.showToast({
            title: "获取供应商详情失败",
            icon: "none"
          });
        });
    },

    // 辅助函数：格式化日期
    formatDate(date) {
      if (!date) return "无";
      const d = new Date(date);
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, "0");
      const day = String(d.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },

    // 格式化开启状态
    formatStatus(status) {
      return status === 1 ? "开启" : "关闭";
    },
   submitForm() { 
	  uni.setStorageSync('supplierId', this.supplierId);
	  uni.navigateTo({
		url: "/pages/erp/supplier/edit"
	  });
	},
  },

  onLoad() {
    this.supplierId = uni.getStorageSync("supplierId");
    this.fetchSupplierDetails();
  },
  onShow() {
    this.supplierId = uni.getStorageSync("supplierId");
    this.fetchSupplierDetails();
  },
};
</script>

<style scoped>
	/* 样式与之前相同 */
	.order-page {
		padding: 10px;
		background-color: #f5f5f5;
	}

	.order-form-container {
		margin-top: 5px;
		/* 为顶部导航栏留出空间 */
		padding: 10px;
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.order-form {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.form-input {
		flex-grow: 1;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 5px;
		font-size: 14px;
	}

	.pickercustomer {
		flex-grow: 1;
		border: 1px solid #ddd;
		border-radius: 5px;
		padding: 10px;
		font-size: 14px;
		width: 330px;
	}

	.pickerproduct {
		flex-grow: 1;
		border: 1px solid #ddd;
		border-radius: 5px;
		padding: 10px;
		font-size: 14px;
		width: 270px;
	}

	.picker {
		flex-grow: 1;
		border: 1px solid #ddd;
		border-radius: 5px;
		padding: 10px;
		font-size: 14px;
		width: 250px;
	}

	.form-textarea {
		flex-grow: 1;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 5px;
		font-size: 14px;
	}

	.product-list-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.add-product-button {
		background-color: #1aad19;
		color: #fff;
		border: none;
		border-radius: 5px;
		font-size: 14px;
		height: 20px;
		width: 90px;
		line-height: 20px;
		/* 垂直居中 */
		text-align: center;
	}

	.product-list {
		margin-top: 2px;
	}

	.product-item {
		border: 1px solid #ddd;
		border-radius: 5px;
		padding: 10px;
		background-color: #fff;
		margin-bottom: 10px;
	}

	.product-item-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 5px 0;
		border-bottom: 1px solid #eee;
	}

	.product-item-row:last-child {
		border-bottom: none;
	}

	.delete-button {
		background-color: #ff4d4f;
		color: #fff;
		border: none;
		border-radius: 5px;
		font-size: 12px;
		height: 20px;
		width: 70px;
		line-height: 20px;
		/* 垂直居中 */
		text-align: center;
	}

	.submit-button {
		margin-top: 20px;
		padding: 10px 20px;
		background-color: #1890ff;
		color: #fff;
		border: none;
		border-radius: 5px;
		font-size: 14px;
	}
</style>